<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <style type="text/css">
        body {
            margin: 0 auto;
            max-width: 720px;
            padding: 0 10px;
            text-align: left;
        }

        .tips {
            background-color: #f8f8f8;
            margin: 10px 0 0;
            padding: 10px;
        }

        .title {
            color: red;
            font-weight: bold;
            padding: 10px 0 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
        }

        h2 {
            font-size: 15px;
            font-weight: normal;
        }

        .wrapper {
            padding: 20px 0 0;
            line-height: 24px;
        }

        .tab {
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .tab:last-child {
            border-bottom: 0;
        }

        .param {
            word-break: break-all;
        }

        .action {
            padding: 10px 0 0;
        }

        .action button {
            margin: 0 0 10px;
            padding: 5px 20px;
        }

        .select-ipt {
            position: relative;
            padding: 0 0 0 105px;
        }

        .select-ipt .tt {
            position: absolute;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            left: 0;
            top: 0;
        }

        .weui_input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            height: 24px;
            line-height: 24px;
        }

        .pageAnimationScale {
            float: left;
            margin-right: 10px;
            width: 80px;

        }

        /*.weui-actionsheet-top-shade{*/
        /*opacity: .7 !important;*/
        /*}*/

        /*.weui-actionsheet-top{*/
        /*position: fixed!important;*/
        /*left: 0;*/
        /*top: 0;*/
        /*-webkit-transform: translateY(-100%);*/
        /*transform: translateY(-100%);*/
        /*-webkit-backface-visibility: hidden;*/
        /*backface-visibility: hidden;*/
        /*z-index: 5000;*/
        /*width: 100%;*/
        /*background-color: #fff;*/
        /*-webkit-transition: -webkit-transform .3s;*/
        /*transition: -webkit-transform .3s;*/
        /*}*/

        /*.weui-actionsheet-top-toggle{*/
        /*-webkit-transform: translateY(0);*/
        /*transform: translateY(0);*/
        /*}*/

        .weui-page-scale .page-scale .slide2 {
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            position: relative;
            transition-property: transform, -webkit-transform;
        }

        .weui-page-scale .page-scale .slide2 li {
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .weui-page-scale .page-scale .slide2 li .container {
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
        }

        .weui-page-scale .page-scale .slide2 li .container img {
            max-width: 100%;
            margin-top: -30px;
        }

        .slide {
            position: relative;
            z-index: 1;
        }

        .slide li {
            flex-shrink: 0;
            height: 74.666667vw;
            position: relative;
            transform: translate3d(0, 0, 0);
            z-index: 1;
        }

        .slide li .img {
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .tips:focus {
            background-color: red;
        }

        .item-listview {
            border-bottom: 1px dashed #ddd;
        }
    </style>
    <!--    <script src="js/jquery.js"></script>-->
    <!--    <script src="js/zepto.js"></script>-->
    <script src="layer3.js"></script>
    <script>
    </script>
    <script src="../../../../jQuery源码视频/一起学JQ源码/a.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="pswp__preloader__icn">
        <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
        </div>
    </div>
    <h1>layer-weui封装函数</h1>
    <div class="tips">
        <P>1、type<5：同type的层不能共存，会关闭之前弹出的；type>=5：同type的层可以共存多个；</P>
        <P>2、type==3：专为缓动动画保留,example:popupUp、popupDown、actions；关闭需要layer.close(true)，layer.close()不能关闭，因为需要等缓动动画结束</P>
    </div>
    <p class="title">type:0弹窗,1:msg,2:loading,3:网页</p>
    <div class="tab">
        <h2>layer.open({})原生弹窗:</h2>
        <p>
            <span>anim：</span>
            <span class="param">scale,up,left,right</span>
        </p>
        <p class="action">
            <button class="layerOpen">纯文字</button>
            <button class="layerOpen1">有标题</button>
            <button class="layerOpen2">有按钮</button>
        </p>
        <p class="action">
            <button class="layerOpen3">up</button>
            <button class="layerOpen4">down</button>
            <button class="layerOpen5">left</button>
            <button class="layerOpen6">right</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerAlert(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">点击回调函数</span>
        </p>
        <p class="action">
            <button class="layerAlert">layerAlert点击</button>
            <button class="layerAlert2">layerAlert2点击</button>
            <button class="layerAlert4">layerAlert4点击</button>
            <button class="layerAlert5">layerAlert5点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerConfirm(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">确定按钮回调函数</span>
        </p>
        <p>
            <span>onCancel：</span>
            <span class="param">取消按钮回调函数</span>
        </p>
        <p class="action">
            <button class="layerConfirm">layerConfirm点击</button>
            <button class="layerConfirm2">layerConfirm2点击</button>
            <button class="layerConfirm4">layerConfirm4点击</button>
            <button class="layerConfirm5">layerConfirm5点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerLoading(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerLoading">数据加载中</button>
        </p>
        <p class="action">
            <button class="layerLoading2">数据加载中2</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerSuccess(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerSuccess">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerDelete(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerDelete">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerMsg():</h2>
        <p class="action">
            <button class="layerMsg">点击（scale）</button>
        </p>
        <p class="action">
            <button class="layerMsgFoot">点击（bottom）</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerAction():</h2>
        <p class="action">
            <button class="layerAction">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>layer-Select():</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action select-ipt">
            <input type="text" class="weui_input" name="zhiyi" readonly placeholder="请点击选择职业"/>
            <span class="tt">职业</span>
        </p>
        <p class="action select-ipt">
            <input type="text" class="weui_input" name="xuexiao" readonly placeholder="请点击选择职业"/>
            <span class="tt">学校</span>
        </p>
    </div>
    <div class="tab">
        <h2>popupUp():是由底部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class="action">
            <button class="popupUp">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>popupDown():是由顶部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class="action">
            <button class="popupDown">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>layer自带图标</h2>
        <div class="action">
            <i class="weui-icon-success"></i>
            <i class="weui-icon-waiting"></i>
            <i class="weui-icon-warn"></i>
            <i class="weui-icon-info"></i>
            <i class="weui-icon-success-circle"></i>
            <i class="weui-icon-success-no-circle"></i>
            <i class="weui-icon-checked"></i>
            <i class="weui-icon-checked-multi"></i>

            <i class="weui-icon-waiting-circle"></i>
            <i class="weui-icon-circle"></i>
            <i class="weui-icon-download"></i>
            <i class="weui-icon-info-circle"></i>
            <i class="weui-icon-safe-success"></i>
            <i class="weui-icon-safe-warn"></i>
            <i class="weui-icon-cancel"></i>
            <i class="weui-icon-search"></i>

            <i class="weui-icon-clear"></i>
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            <i class="weui-icon_msg"></i>
            <i class="weui-icon_msg weui-icon-warn"></i>
            <i class="weui-icon_msg-primary weui-icon-warn"></i>
            <P>图标2</P>
            <i class="weui-loading"></i>
            <i class="weui-icon-more"></i>
            <i class="weui-icon-btn_goback"></i>
            <i class="weui-icon-btn_close"></i>
        </div>
    </div>
    <div class="tab">
        <h2>由左向右边弹出</h2>
        <p class="action">
            <button class="pageAnimationLeft">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>由小放大，缩放页面</h2>
        <p class="action clearfix photo-browser">
            <span class="pageAnimationScale" data-url="images/1.jpg" data-index="0">
                <img src="images/1.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/2.jpg" data-index="1">
                <img src="images/2.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/3.jpg" data-index="2">
                <img src="images/3.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/8.jpg" data-index="3">
                <img src="images/8.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/pic.jpg" data-index="4">
                <img src="images/pic.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/10.jpg" data-index="5">
                <img src="images/10.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/11.jpg" data-index="6">
                <img src="images/11.jpg" width="100%"/>
            </span>
        </p>
    </div>
    <div class="tab">
        <h2>弹出多图组成</h2>
        <p class="action">
            <button class="photo-layer">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>listview列表摸版加载</h2>
        <div class="action">
            <button class="listmore">点击加载更多</button>
            <div id="view">
                <template>
                    <p class="flex-box">
                        <span class="flex1">{{ d.Title}}</span>
                        {{# if(d.status== 0){ }}
                        <span class="status">已审核</span>
                        {{#}else if(d.status== 1){ }}
                        <span class="status">审核失败</span>
                        {{#}else if(d.status== 2){ }}
                        <span class="status">审核中</span>
                        {{# } }}
                    </p>
                    <p><span>{{ d.NickName}}</span><span>{{ d.Content || '' }}</span></p>
                    <div class="photo">
                        {{# if(d.Photos.length > 0){ }}
                        <ul class="flex-box">
                            {{# laytpl.each(d.Photos, function(index, item){ }}
                            <li><img src="{{ item.ThumbnailUrl }}" width="100%"/></li>
                            {{# }); }}
                        </ul>
                        {{#} }}
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.layerOpen').on('click', function () {
        layer.open({
            fixed: false,
            content: '系统升级中，敬请期待！',
            className: 'weui',
            success: function (el, index) {

            },
        });
    })

    $('.layerOpen1').on('click', function () {
        layer.open({
            zIndex: 100,
            title: [
                '温馨提示',
                'background-color: #F2F2F2;',
            ],
            content: '系统升级中，敬请期待！',
        })
    })

    $('.layerOpen2').on('click', function () {
        layer.open({
            content: '系统升级中，敬请期待！',
            btn: '知道了',
        })
    })

    $('.layerOpen3').on('click', function () {
        layer.open({
            anim: "up",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen4').on('click', function () {
        layer.open({
            anim: "down",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen5').on('click', function () {
        layer.open({
            anim: "left",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen6').on('click', function () {
        layer.open({
            anim: "right",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerAlert').on('click', function () {
        var title = '警告';
        var msg = '1AlphaGo 就是天网的前身，人类要完蛋了！';

        //支持简化调用
        //$.alert(msg);
        layer.alert({
            title: title,
            msg: msg,
        })

        // layer.alert(msg);
    });

    $('.layerAlert2').on('click', function () {
        var title = '警告';
        var msg = '1AlphaGo 就是天网的前身，人类要完蛋了！';
        layer.alert({
            title: title,
            msg: msg,
            type: 2,
        })
    });

    $('.layerAlert4').on('click', function () {
        var title = '警告';
        var msg = '1AlphaGo 就是天网的前身，人类要完蛋了！';
        layer.alert({
            title: title,
            msg: msg,
            type: 4,
        })
    });

    $('.layerAlert5').on('click', function () {
        var title = '警告';
        var msg = '1AlphaGo 就是天网的前身，人类要完蛋了！';
        layer.alert({
            title: title,
            msg: msg,
            type: 5,
        })
    });

    $('.layerConfirm').on('click', function () {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    });

    $('.layerConfirm2').on('click', function () {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            type: 2,
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    });

    $('.layerConfirm4').on('click', function () {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            type: 4,
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    });

    $('.layerConfirm5').on('click', function () {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            type: 5,
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    });

    $('.layerLoading').on('click', function () {
        layer.loading({
            msg: '加载中...',
        });

        //支持简化调用
        //layer.loading('加载中...');
    });

    $('.layerLoading2').on('click', function () {
        // layer.loading2({
        //     msg: '加载中...',
        // });

        //支持简化调用
        layer.loading2('加载中...');
    });

    $('.layerSuccess').on('click', function () {
        layer.toast({
            msg: '操作成功',
        });

        //支持简化调用
        //$.toast('成功调研');
    });

    $('.layerDelete').on('click', function () {
        layer.toast({
            msg: '已经取消',
            skin: 'error',
        });
    });

    // $('input[name=zhiyi]').select({
    //     title: "选择职业",
    //     input: '法官',
    //     items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
    // });
    //
    // $('input[name=xuexiao]').select({
    //     title: "选择学校",
    //     multi: true,
    //     items: ["南昌大学", "财经大学", "江西师范大学", "航空大学", "江西理工学院", "其他"]
    // });

    $('.layerMsg').on('click', function () {
        layer.msg({
            "msg": "111",
            "anim": "scale",
        });
    });

    $('.layerMsgFoot').on('click', function () {
        layer.msg({
            msg: '至少选择2',
            direct: 'bottom',
        });
    });

    $('.layerAction').on('click', function () {
        layer.actions({
            actions: [{
                text: "编辑",
                onClick: function () {
                    //$.loading();
                    layer.toast('操作成功', function () {
                        layer.closeAll();
                    })
                }
            }, {
                text: "删除",
                style: 'color:red;',
                onClick: function () {
                    //do something
                }
            }]
        });
    });

    $(".popupUp").on("click", function () {
        var html = "<div>";
        html += '<div>我是底部弹出框效果</div>'
        html += '<div>我是底部弹出框效果</div>'
        html += '<div>我是底部弹出框效果</div>'
        html += '</div>'
        layer.popupUp({
            content: html,
            zIndex: 10,
        });
    })

    $(".popupDown").on("click", function () {
        var html = "<div>";
        html += '<div>我是顶部弹出框效果</div>'
        html += '<div>我是顶部弹出框效果</div>'
        html += '<div>我是顶部弹出框效果</div>'
        html += '</div>'
        layer.popupDown({
            content: html
        });
    })

    $(".pageAnimationLeft").on("click", function () {
        var html = '<div class="page-left" style="height: 100vh;overflow-y: auto;">';
        html += '<P class="close">点击关闭</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '</div>';
        layer.popupUp({
            anim: 'weui-page',
            content: html,
            touchNo: true,
            success: function () {
                $('.page-left .close').on('click', function () {
                    layer.closeAll();
                })
            }
        });
    })

    $(".pageAnimationScale").on("click", function () {
        //弹出左滑动和幻灯片左滑动效果造成的
        var _self = $(this);
        var imgAll = [];
        _self.parents().find('.pageAnimationScale').each(function () {
            imgAll.push($(this).attr('data-url'));
        })
        var initIndex = _self.attr('data-index');
        var initImg = _self.attr('data-url');

        layer.photoBrowser({
            initIndex: initIndex,
            initImg: initImg,
            items: imgAll,
            itemsWrap: '.photo-browser',
            itemSelector: '.pageAnimationScale',
        })
    })

    $('.photo-layer').on('click', function () {
        layer.photoLayer({
            btnClose: true,
            className: 'test',
            shade: 'background-color: rgba(0,0,0,1)',
            shadeClose: false,
            items: [
                {
                    'img': 'images/tip_01.png',
                },
                {
                    'img': 'images/tip_02.png',
                },
                {
                    'img': 'images/tip_03.png',
                    'className': 'close',
                    'link': 'http://www.baidu.com',
                },
                {
                    'img': 'images/tip_04.png',
                    'link': 'http://www.baidu.com',
                },
                {
                    'img': 'images/tip_05.png',
                },
            ],
            success: function () {

            }
        })
    })

    function HTMLDecode(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }

    var data = {
        "Total": 8,
        "ResultCode": "0",
        "ErrMsg": "成功",
        "List": [
            {
                "ID": 41,
                "ISubjectD": null,
                "Title": "测试标题",
                "NickName": "Gallen.Yu",
                "RealName": "111111111111111",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/h5uploads/headericon/20211221/0e296836-7e9c-47d5-ba7a-2ad49b3b6585.jpg",
                "CreateTime": "2021/12/27 13:57:10",
                "Content": "我也参加这个活动",
                "Photos": [
                    {
                        "ID": 51,
                        "WorksID": 41,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/h5uploads/artactivity/20211227/0f37d36a-f083-43fd-b148-89d2dd859d50.jpg"
                    },
                    {
                        "ID": 52,
                        "WorksID": 41,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/h5uploads/artactivity/20211227/68b4fa53-1d4d-450f-b74b-d5a68792c67c.jpg"
                    },
                    {
                        "ID": 53,
                        "WorksID": 41,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/h5uploads/artactivity/20211227/b0233014-c512-4a0b-a24f-e64540107ef3.jpg"
                    },
                    {
                        "ID": 54,
                        "WorksID": 41,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/h5uploads/artactivity/20211227/0bc82c7b-332b-49ae-b877-ce824938ba07.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 0,
            },
            {
                "ID": 40,
                "ISubjectD": null,
                "Title": "测试图片",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:55:35",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 50,
                        "WorksID": 40,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/h5uploads/artactivity/20211227/61c82ace-f651-42c8-9233-4d5c7666f2f2.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 1,
            },
            {
                "ID": 38,
                "ISubjectD": null,
                "Title": "庆祝",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:43:36",
                "Content": "喝点酒",
                "Photos": [],
                "CommentCount": 0,
                "status": 2,
            },
            {
                "ID": 23,
                "ISubjectD": null,
                "Title": "圣诞2",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/25 16:04:00",
                "Content": "今天是圣诞2",
                "Photos": [],
                "CommentCount": 0,
                "status": 1,
            },
            {
                "ID": 20,
                "ISubjectD": null,
                "Title": "圣诞",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/25 15:54:03",
                "Content": "今天是圣诞",
                "Photos": [],
                "CommentCount": 0,
                "status": 0,
            },
            {
                "ID": 4,
                "ISubjectD": null,
                "Title": "测试作品1",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/23 19:08:43",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 1,
                        "WorksID": 4,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 2,
                        "WorksID": 4,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 3,
                        "WorksID": 4,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 4,
                        "WorksID": 4,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 2,
            },
            {
                "ID": 5,
                "ISubjectD": null,
                "Title": "测试作品2",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/23 19:08:43",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 5,
                        "WorksID": 5,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 6,
                        "WorksID": 5,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 7,
                        "WorksID": 5,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    },
                    {
                        "ID": 8,
                        "WorksID": 5,
                        "ThumbnailUrl": "http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 1,
            }
        ],
        "timespan": "2022-01-09 22:19:38",
        "Append": "[{\"ID\":7,\"Name\":\"冬至活动\",\"ThumbnailUrl\":\"http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg\",\"StartTime\":\"2021/12/23 00:00:00\",\"EndTime\":\"2021/12/30 16:45:06\",\"PublishFlag\":false,\"RuleDesc\":\"无规则限制\",\"EnableVote\":false,\"EnableComment\":false,\"Status\":1,\"EnableSubject\":false,\"EnablePicture\":true,\"EnableTxt\":true,\"Name1\":\"冬至祝福\",\"workNum\":9,\"memberNum\":3}]",
        "Append2": null
    };

    $('#view').listview({
        "data": data,
        "keyEach": 'List',
        "itemTap": function (listitem, dataitem, datasource, event) {
            console.log(listitem)
            console.log(dataitem)
            console.log(datasource)
            console.log(event)
        }
    });

    $('.listmore').on('click', function () {
        // console.log($('#view').find('.listviews'))
        $('#view').listview({
            "empty":true,
            "data": data,
            "keyEach": 'List',
            "itemTap": function (listitem, dataitem, datasource, event) {
                console.log(listitem)
                console.log(dataitem)
                console.log(datasource)
                console.log(event)
            }
        });
    })
</script>
</body>
</html>
